<template>
    <div id="stock">
        <div class="page-title">库存管理</div>
        <el-alert
                title="选择商品后可以批量导出或删除"
                show-icon
                type="info"></el-alert>
        <div class="container padder">
            <div class="filter">
                <el-form :inline="true">
                    <el-form-item label="">
                        <el-date-picker
                                v-model="searchForm.time"
                                type="daterange"
                                value-format="timestamp"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="">
                        <el-cascader
                                v-model="cascaderType"
                                :options="$store.state.brandData"
                                @change="changeCascader"
                                :props="{ expandTrigger: 'hover' }"
                                placeholder="请选择分类"
                        >
                            <template slot-scope="{ node, data }">
                                <div class="flex-align-center">
                                    <el-image :src="data.img" style="width: 88px"></el-image>
                                    <div class="name">
                                        {{ data.label }} <span
                                            v-if="!node.isLeaf"> <!--({{ data.children.length }})--> </span>
                                    </div>
                                </div>

                            </template>

                        </el-cascader>
                    </el-form-item>
                    <el-form-item>
                        <el-select placeholder="请选择商品" v-model="searchForm.shangping_id">
                            <el-option v-for="pro in proList" :key="pro.Id" :value="pro.Id"
                                       :label="pro.shangping_mingcheng">
                                <span style="width: 100px;overflow: visible">{{pro.shangping_mingcheng.length > 12 ? pro.shangping_mingcheng.substr(0,12)+'...':pro.shangping_mingcheng }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select v-model="searchForm.xiaoshou_zhuangtai">
                            <el-option v-for="item in saleStatus" :key="item.value" :value="item.value"
                                       :label="item.label">

                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input placeholder="请输入卡号或卡密" v-model="searchForm.kahao_or_kami"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchForm.page = 1;getList()" :loading="loading">搜索
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="m-t">
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="create_time"
                            label="创建时间"
                            width="220">
                    </el-table-column>
                    <el-table-column
                            prop="shouchu_time"
                            label="卖出时间"
                            width="220">
                        <template v-slot="scope">
                            {{scope.row.shouchu_time ? scope.row.shouchu_time :'暂未卖出'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="商品名称"
                            show-overflow-tooltip>
                        <template v-slot="scope">
                            {{getProNameById(scope.row.guishu_shangping_id)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="kahao"
                            label="卡密"
                    >
                        <template v-slot="scope">
                            <div v-if="scope.row.kahao" class="show"><span class="text-ellipsis w100">卡号：{{scope.row.kahao}} </span>
                                <el-button type="text" class="tag-read" @click="$util.copy()"
                                           :data-clipboard-text="scope.row.kahao">复制
                                </el-button>
                            </div>
                            <div v-if="scope.row.kami" class="show"><span class="text-ellipsis w100">卡密：{{scope.row.kami}}</span>
                                <el-button type="text" class="tag-read " @click="$util.copy()"
                                           :data-clipboard-text="scope.row.kami">复制
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="操作"
                            show-overflow-tooltip>
                        <template slot-scope="scope">

                            <el-button type="text" class="text-dark-lt" @click="editCard(scope.$index)">
                                <i class="el-icon-edit m-r-xs"></i>编辑
                            </el-button>
                            <el-button type="text" class="text-danger" @click="del([scope.row.Id])">
                                <i class="el-icon-delete m-r-xs"></i>删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination :total="total" :options="searchForm" @change="getList"></pagination>
                <bottom-action :value="showBottomAction">
                    <template>
                        <p>当前已选：{{selections.length}} 条</p>
                        <div class="m-t">
                            <el-button type="danger" size="small" @click="del(selections)">
                                <i class="el-icon-delete m-r-xs"></i>删除
                            </el-button>
                        </div>
                    </template>
                </bottom-action>
            </div>
        </div>
        <el-dialog
                title="编辑卡密"
                :close-on-click-modal="false"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form>
                <el-form-item label="卡号">
                    <el-input type="text" v-model="editForm.kahao"></el-input>
                </el-form-item>
                <el-form-item label="卡密">
                    <el-input type="text" v-model="editForm.kami"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="edit" :loading="editLoading">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import mixins from '../../mixin'

    export default {
        name: 'stock',
        components: {},
        mixins: [mixins],
        data() {
            return {
                total: 0,
                searchForm: {
                    da_leimu_id: '',
                    xiao_leimu_id: '',
                    shangping_id: '',
                    xiaoshou_zhuangtai: '',
                    kahao_or_kami: '',
                    page: 1,
                    time: '',
                },
                cascader: [],
                cascaderType: null,
                tableData: [],
                loading: false,
                saleStatus: [
                    {label: '全部', value: ''},
                    {label: '未销售', value: '0'},
                    {label: '已经售', value: '1'}
                ],
                proList: [],
                showBottomAction: false,
                selections: [],
                dialogVisible: false,
                editForm: {
                    Id: '',
                    kahao: '',
                    kami: ''
                },
                editLoading: false
            }
        },
        computed: {},
        methods: {
            //编辑
            edit() {
                this.editLoading = true;
                this.$axios.post(`/api/shanghu/kami_bianji`, this.editForm)
                    .then(res => {
                        this.editLoading = false;
                        if (res.code === `200`) {
                            this.$message.success('编辑成功');
                            this.getList()
                        }
                    })
            },
            //编辑卡密
            editCard(index) {
                this.dialogVisible = true;
                let {Id, kahao, kami} = this.tableData[index];
                this.editForm.Id = Id;
                this.editForm.kahao = kahao;
                this.editForm.kami = kami;
            },
            //删除卡密
            del(Id) {
                this.$confirm('确认要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post(`/api/shanghu/kami_shanchu`, {Id})
                        .then(res => {
                            if (res.code === `200`) {
                                this.$message.success('删除成功');
                                this.getList();
                            }
                        })
                })
            },
            //表格选择项
            handleSelectionChange(val) {
                this.showBottomAction = !!val.length;
                this.selections = val.map(item => item.Id)
            },
            //获取列表
            getList() {
                this.loading = true;
                this.$axios.post(`/api/shanghu/kami_get`, this.searchForm)
                    .then(res => {
                        this.loading = false;
                        if (res.code === `200`) {
                            this.total = res.data.shuliang
                            this.tableData = res.data.kami_data
                        }
                    })
            },
            //选择分类
            changeCascader(val) {
                this.searchForm.da_leimu_id = val[0];
                this.searchForm.xiao_leimu_id = val[1];

            },
            //获取商品分类
            getBrand() {
                return new Promise(resolve => {
                    this.$axios.post(`/api/shanghu/kami_up_get`)
                        .then(res => {
                            resolve();
                            if (res.code === `200`) {
                                let brand = res.data.da_fenlei_data;
                                let subBrand = res.data.xiao_fenlei_data;
                                this.proList = res.data.shangping_data;
                                this.cascader = brand.map(item => {
                                    item.children = item.children || [];
                                    item.value = item.Id;
                                    item.label = item.fenlei_mingcheng
                                    subBrand.forEach(sub => {
                                        if (sub.guishu_fenlei_id === item.Id) {
                                            sub.value = sub.Id;
                                            sub.label = sub.fenlei_mingcheng
                                            item.children.push(sub)
                                        }
                                    });
                                    return item
                                })
                            }
                        })
                })
            },

            /**
             * 根据商品Id 获取商品名
             */
            getProNameById(id) {
                let result = this.proList.filter(item => item.Id === id)[0];
                return result.shangping_mingcheng
            }
        },
        async mounted() {
            this.searchForm.shangping_id = +this.$route.query.id || '';
            await this.getBrand();
            this.getList();
        },
    }
</script>

<style lang="less" scoped>
    .show {
        display: flex;
        align-items: center;

        .w100 {
            width: 80%;

        }
    }

</style>
